<template>
  <div>
    <Header :left="true" leftText="返回" title="维修指派" />
    <div>
      <van-tabs
        v-model="active"
        type="card"
        :offset-top="80"
        :sticky="true"
        @click="tabChange"
        swipeable
        style="top:8px;font-size:15px;"
        color="#1c6c8d"
      >
        <!-- 未指派页面 -->
        <van-tab title="未指派" style="font-size:15px;">
          <van-button :block="true" class="buttonLeft" @click="selectAll" type="primary" :text="selectFont" />
          <van-button :block="true" class="buttonRight" type="primary" @click="assign" text="批量指派" />
          <van-row style="margin-top:60px;">
            <van-col><van-image width="40" height="30" style="margin-left:-10px;" src="assets/block.png"/></van-col>
            <van-col class="message">记录</van-col>
          </van-row>
          <div class="textScroll">
            <!-- 循环数据开始 -->
            <div v-for="item in itemsOne" :key="item.id">
              <div style="width:100%;background-color: #F3F4F8;height:5px;"><span></span></div>
              <div class="divStyle" @click.prevent="showDetail(item)">
                <van-row style="margin-top:10px;margin-left:10px;">
                  <van-col span="8" style="font-weight:bold;color:#A9A9A9;">{{ item.description }}</van-col>
                  <van-col span="14" style="color:#A9A9A9;"
                    ><van-icon name="assets/time.png" /> {{ item.requestTime }}</van-col
                  >
                  <van-col span="2" style="color:#A9A9A9;" @click.stop=""
                    ><van-checkbox
                    checked-color="#138087"
                      v-model="item.checked"
                      @click.prevent="item.checked ? false : true"
                      shape="square"
                    ></van-checkbox
                  ></van-col>
                </van-row>
                <van-divider />
                <van-row style="margin-left:10px;">
                  <van-col span="18" style="color:#A9A9A9;">设备编码：{{ item.equipName }}</van-col>
                </van-row>
                <van-row style="margin-left:10px;margin-top:10px;">
                  <van-col span="18" style="color:#A9A9A9;">报修单号：{{ item.requestCode }}</van-col>
                </van-row>
                <van-row style="margin-left:10px;margin-top:10px;">
                  <van-col span="18" style="color:#A9A9A9;">报修人：{{ item.requestUser }}</van-col>
                  <van-col span="3"
                    ><van-button
                      color="#f58220"
                      style="width:75px;height:30px;margin-bottom:10px;right:0px;"
                      type="primary"
                      text="未指派"
                  /></van-col>
                  <!-- <van-col span="3"><van-image width="40" height="30" src="assets/noAssign.png"/></van-col> -->
                </van-row>
              </div>
            </div>
            <!-- 循环数据结束 -->
          </div>
          <van-pagination
            class="pagination"
            force-ellipses
            v-model="queryParams.pageNum"
            :total-items="queryParams.total"
            @change="queryWaitAssignList"
            :items-per-page="queryParams.pageSize"
          />
        </van-tab>
        <!-- 已指派页面 -->
        <van-tab title="已指派">
          <van-row style="margin-top:20px;">
            <van-col><van-image width="40" height="30" style="margin-left:-10px;" src="assets/block.png"/></van-col>
            <van-col class="message">记录</van-col>
          </van-row>
          <div class="textScroll2">
            <!-- 循环数据开始 -->
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
              <div v-for="item in itemsTwo" :key="item.id">
                <div style="width:100%;background-color: #F3F4F8;height:5px;"><span></span></div>
                <div class="divStyle" @click="showDetail(item)">
                  <van-row style="margin-top:10px;margin-left:10px;">
                    <van-col span="13" style="font-weight:bold;color:#A9A9A9;">{{ item.description }}</van-col>
                    <van-col span="11" style="color:#A9A9A9;"
                      ><van-icon name="assets/time.png" /> {{ item.requestTime }}</van-col
                    >
                  </van-row>
                  <van-divider />
                  <van-row style="margin-left:10px;">
                    <van-col span="20" style="color:#A9A9A9;">报修单号：{{ item.requestCode }}</van-col>
                  </van-row>
                  <van-row style="margin-top:10px;margin-left:10px;">
                    <van-col span="18" style="color:#A9A9A9;">报修人：{{ item.requestUser }}</van-col>
                  </van-row>
                  <van-row style="margin-top:10px;margin-left:10px;">
                    <van-col span="10" style="hight:20px;color:#A9A9A9;">审核人：{{ item.checkUser }}</van-col>
                  </van-row>
                  <van-row style="margin-top:10px;margin-left:10px;">
                    <van-col span="20" style="color:#A9A9A9;">审核时间：{{ item.checkTime }}</van-col>
                    <van-col span="3"
                      ><van-button
                        color="#f58220"
                        style="width:75px;height:30px;margin-bottom:10px;right:20px;"
                        type="primary"
                        text="已指派"
                    /></van-col>
                  </van-row>
                </div>
              </div>
            </van-list>

            <!-- 循环数据结束 -->
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import {
  Icon,
  Button,
  CellGroup,
  Cell,
  Field,
  tab,
  tabs,
  Col,
  Row,
  Image as VanImage,
  Divider,
  Checkbox,
  Pagination,
  Panel,
  Toast,
  Dialog,
  List,
} from 'vant'
import { _httpClient } from '@/libs/api'
import { storage } from '@/libs/utils'
import { removeToken, getToken, setBaseApiFrefix, getBaseApiFrefix } from '@/libs/auth'
import { memory } from '@/libs/utils'
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(tab)
Vue.use(tabs)
Vue.use(Button)
Vue.use(Col)
Vue.use(Row)
Vue.use(Icon)
Vue.use(VanImage)
Vue.use(Divider)
Vue.use(Checkbox)
Vue.use(Pagination)
Vue.use(Panel)
Vue.use(Dialog)
Vue.use(List)
import Header from '@/components/header.vue'
import apicloud from '@/libs/apicloud'
export default {
  components: { Button, Header, Icon, CellGroup, Cell, Field, tab, tabs, Col, Row },

  data() {
    return {
      //动态加载数据
      loading: false,
      finished: false,

      user: [], //登录用户信息
      //分页参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },

      //下拉刷新动态
      loadParams: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },

      allSelected: false,
      selectFont: '一键勾选',
      screenWidth: 0,
      checked: true,
      active: 2,
      currentPage: 1,
      fileUrl: '',
      itemsOne: [
        // { id: 1, equip: '注塑机1', time: '2020-12-02 22:08:00', user: '测试账户1', checked: true },
        // { id: 2, equip: '注塑机2', time: '2020-12-03 22:08:00', user: '测试账户2', checked: false },
        // { id: 3, equip: '注塑机3', time: '2020-12-03 22:08:00', user: '测试账户3', checked: true },
        // { id: 4, equip: '注塑机4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
        // { id: 5, equip: '注塑机5', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
      ],
      itemsTwo: [], //已指派列表
    }
  },
  created: function() {
    let oldHight = api.winWidth
    this.screenWidth = oldHight
    //获取当前系统登录用户
    this.user = JSON.parse(storage.get('user'))

    let tkn = getToken()
    if (!tkn) {
      api.openWin({
        name: 'login',
        url: './login-login.html',
        rect: {
          x: 0,
          y: 150,
          w: api.winWidth,
          h: api.winHeight,
        },
      })
    }

    this.queryWaitAssignList()
  },
  methods: {
    //已指派数据动态加载
    onLoad() {
      //页数+1
      this.loadParams.pageNum = this.loadParams.pageNum + 1
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        this.queryCheckedAssignList()
        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (this.itemsTwo.length >= this.loadParams.total) {
          this.finished = true
        }
      }, 1000)
    },

    //查询已指派报修单
    async queryCheckedAssignList() {
      let _this = this
      // Toast.loading({
      //   mask: true,
      //   forbidClick: true,
      //   duration: 0,
      //   message: 'Loading...',
      // })
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
            '/app/repair/requestInfo/checkedList?pageNum=' +
            _this.loadParams.pageNum +
            '&pageSize=' +
            _this.loadParams.pageSize,
          {
            body: { siteKey: _this.user.site },
          }
        )

        if (res.code === 200) {
          // Toast.clear()
          if (!_this.finished) {
            for (let i = 0; i < res.rows.length; i++) {
              _this.itemsTwo.push(res.rows[i])
            }

            _this.loadParams.total = res.total
            //判断是否已加载完成
            if (_this.itemsTwo.length >= _this.loadParams.total) {
              _this.finished = true
            }
          }
        } else {
          Toast.fail(res.msg)
        }
      } catch (e) {
        alert(JSON.stringify(e))
        Toast.fail(JSON.stringify(e))
      }
    },

    //tab切换
    tabChange(name, title) {
      if (name == 0) {
        //待指派界面
        this.queryWaitAssignList()
      } else if (name == 1) {
        //已指派界面
        this.queryCheckedAssignList()
      }
    },
    //详情展示
    showDetail(item) {
      api.openWin({
        name: 'requestDetail',
        url: './maintain-requestDetail.html',
        type: 'fade',
        pageParam: {
          equip: item,
        },
      })
    },
    // 全选
    selectAll() {
      //判断当前数据是否存在
      if (this.itemsOne.length == 0) {
        Dialog.alert({
          message: '当前无数据可操作',
            theme: 'round-button',
        }).then(() => {
          // on close
        })
        return
      }
      if (!this.allSelected) {
        this.allSelected = true
        this.selectFont = '取消勾选'
        for (let i = 0; i < this.itemsOne.length; i++) {
          this.itemsOne[i].checked = true
        }
      } else {
        this.allSelected = false
        this.selectFont = '一键勾选'
        for (let i = 0; i < this.itemsOne.length; i++) {
          this.itemsOne[i].checked = false
        }
      }
    },
    //查询待指派保修单
    async queryWaitAssignList() {
      let _this = this
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: 'Loading...',
      })
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
            '/app/repair/requestInfo/list?pageNum=' +
            _this.queryParams.pageNum +
            '&pageSize=' +
            _this.queryParams.pageSize,
          { body: { siteKey: _this.user.site } }
        )

        if (res.code === 200) {
          Toast.clear()
          _this.itemsOne = res.rows
          _this.queryParams.total = res.total
        } else {
          Toast.fail(res.msg)
        }
      } catch (e) {
        alert(JSON.stringify(e))
        Toast.fail(JSON.stringify(e))
      }
    },

    //一键指派
    assign() {
      let _this = this
      let selecedList = []
      for (let i = 0; i < _this.itemsOne.length; i++) {
        if (_this.itemsOne[i].checked) {
          selecedList.push(_this.itemsOne[i])
        }
      }
      if (selecedList.length == 0) {
        Toast('请先勾选待指派的数据')
        return
      }
      //打开人员选择界面
      api.openWin({
        name: 'personSelect',
        url: './common-personSelect.html',
        type: 'fade',
      })
      api.addEventListener(
        {
          name: 'resultUser',
        },
        function(ret, err) {
          if (ret.value.selectUser.length == 0) {
            Dialog.alert({
              message: '未选择指派人员',
                theme: 'round-button',
            }).then(() => {
              // on close
            })
            return
          }
          let selectUser = ret.value.selectUser
          //选择人员后操作
          _this.updateRequest(selecedList, selectUser)
        }
      )
      return
    },

    //更新报修单
    async updateRequest(selecedList, selectUser) {
      let _this = this
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: 'Loading...',
      })
      //组装数据
      //storage.set('username', 'admin')

      let ids = [] //操作的报修单
      let equipKey = [] //设备KEY
      let assignUser = [] //指派用户

      //报修单赋值
      for (let i = 0; i < selecedList.length; i++) {
        ids.push(selecedList[i].id)
        equipKey.push(selecedList[i].eqKey)
      }
      //指派用户
      for (let i = 0; i < selectUser.length; i++) {
        assignUser.push(selectUser[i].userAccound)
      }
      //数据合并
      let param = {
        userName: _this.user.userName,
        userNick: _this.user.nickName,
        ids: ids,
        equipKey: equipKey,
        assignUser: assignUser,
        siteKey: _this.user.site,
      }
      // alert(param)
      // return
      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/repair/requestInfo/updateRequest', {
          body: param,
        })

        if (res.code === 200) {
          Toast.clear()

          //移除界面数据
          for (let i = 0; i < selecedList.length; i++) {
            for (let j = 0; j < _this.itemsOne.length; j++) {
              if (selecedList[i].id == _this.itemsOne[j].id) {
                _this.itemsOne.splice(j, 1)
              }
            }
          }
          _this.allSelected = false
          _this.selectFont = '一键勾选'

          Dialog.alert({
            message: res.msg,
              theme: 'round-button',
          }).then(() => {})
        } else {
          Dialog.alert({
            message: res.msg,
              theme: 'round-button',
          }).then(() => {
            // on close
          })
          Toast.clear()
        }
      } catch (e) {
        alert(JSON.stringify(e))
        Toast.fail(JSON.stringify(e))
      }
    },
  },
}
</script>
<style>
body {
  background-color: White;
}

.pic {
  width: 100%;
  text-align: center;
}

.divMedia {
  margin-top: 10px;
  height: 190px;
  border: solid #dcdcdc;
  margin-left: 5px;
  margin-right: 15px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
}

.clickbtn {
  width: 1;
  margin: 5px 10px;
  line-height: 45px;
  border: 1px #ccc dashed;
  text-align: center;
}
.buttonRight {
  position: fixed;
  margin-top: -40px;
  right: 15px;
  width: 90px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}
.buttonLeft {
  position: fixed;
  margin-top: -40px;
  right: 110px;
  width: 90px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}
.message {
  font-size: 20px;
  margin-top: 0px;
  margin-left: -10px;
  font-weight: bold;
}
.divStyle {
  /* border: 1px solid #dcdcdc; */
  border-top-width: 3px;
  border-left-width: 3px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 4px;
}
.pagination {
  position: fixed;
  bottom: 15px;
  width: 100%;
  color: rgb(0, 0, 255);
  text-align: center;
}
.textScroll {
  display: inline-block;
  position: fixed;
  top: 13rem;
  bottom: 5px;
  overflow: scroll;
  right: 0;
  width: 100%;
  margin-bottom: 4.7rem;
  z-index: 1;
}
.textScroll2 {
  display: inline-block;
  position: fixed;
  top: 10rem;
  left: 0;
  bottom: 2px;
  overflow-y: scroll;
  width: 100%;
  margin-bottom: 1.7rem;
  z-index: 1;
  overflow-x: hidden;
  /*解决ios上滑动不流畅*/
  -webkit-overflow-scrolling: touch;
}
</style>
